<template>
  <div class="centerTopBox">
    <ul class="ulOne">
      <li class="liJi">
        <div>
          <span>物料种类：</span>
          <b>{{centerTopInfo.materialNum}}种</b>
        </div>
      </li>
      <li class="liOu">
        <div>
          <span>构建库存量：</span>
          <b>{{centerTopInfo.inventoryNum}}件</b>
        </div>
      </li>
    </ul>
    <ul class="ulTwo">
      <li class="liJi liTop">
        <div>
          <p class="pContent pstyle">
            <span>
              <i class="iconfont icon-litiyuanzhuzhutuhuise"></i>原材库存
            </span>
            <b>占比</b>
            <em>
              {{centerTopInfo.rawRate}}
              <strong>%</strong>
            </em>
          </p>
          <p class="pTwoContent pstyle">
            <span></span>
            <em>{{centerTopInfo.rawNum}}件</em>
          </p>
        </div>
      </li>
      <li class="liOu liTop">
        <div>
          <p class="pContent pstyle">
            <span>
              <i class="iconfont icon-wuliaoguanli"></i>成品库存
            </span>
            <b>占比</b>
            <em>
              {{centerTopInfo.productRate}}
              <strong>%</strong>
            </em>
          </p>
          <p class="pTwoContent pstyle">
            <span></span>
            <em>{{centerTopInfo.productNum}}件</em>
          </p>
        </div>
      </li>
    </ul>
    <ul class="ulThree">
      <li v-for="(item,index) in centerTopInfo.details" :key="index">
        <div>
          <h1>{{item.materialName}}</h1>
          <p class="threePCenter">
            <b>{{item.allNum}}</b>
            <em>{{item.unit}}</em>
          </p>
          <p class="threePBottom">
            <span>当日</span>
            <b>{{item.num}}</b>
            <!-- <em>{{item.unit}}</em> -->
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: {
    centerTopInfo: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  watch: {},
  mounted() {},
  methods: {}
}
</script>
<style lang='scss' scoped>
.centerTopBox {
  height: 50%;
  width: 100%;
  ul {
    li {
      list-style: none;
      height: 100%;
      float: left;
      div {
        background: rgba(125, 125, 125, 0.16);
        width: 100%;
        height: 100%;
        border-radius: 10px;
        padding: 0 10px;
        font-size: 14px;
        border: 1px solid rgba(166, 203, 249, 0.3);
      }
    }
    .liJi {
      padding-right: 5px;
    }
    .liOu {
      padding-left: 5px;
    }
    .liTop {
      padding-top: 10px;
    }
  }
  .ulOne {
    width: 100%;
    height: 20%;
    li {
      width: 50%;
      div {
        display: flex;
        justify-content: center;
        align-items: center;
        span {
          color: #9cc7fc;
          width: 66%;
        }
        b {
          width: 35%;
          text-align: right;
          color: #fff;
          font-weight: normal;
        }
      }
    }
  }
  .ulTwo {
    width: 100%;
    height: 30%;
    li {
      width: 50%;
      div {
        width: 100%;
        .pstyle {
          margin: 0;
          width: 100%;
          height: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
        }
        .pContent {
          span {
            width: 55%;
            color: #9cc7fc;
            i {
              color: #4284d3;
            }
          }
          b {
            width: 20%;
            font-weight: normal;
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            border-radius: 10px;
            text-align: center;
            padding: 2px 0;
            font-size: 12px;
          }
          em {
            width: 35%;
            text-align: right;
            font-style: normal;
            color: #fff;
            strong {
              font-weight: normal;
              color: #9cc7fc;
              margin: 0;
              padding: 0;
            }
          }
        }
        .pTwoContent {
          span {
            width: 65%;
            height: 50%;
            background: linear-gradient(to right, #44b6fe, #0ce7fe);
            border-radius: 10px;
          }
          em {
            width: 35%;
            text-align: right;
            font-style: normal;
            color: #fff;
          }
        }
        // margin-top: 10px;
      }
    }
  }
  .ulThree {
    width: 100%;
    height: 50%;
    li {
      width: 25%;
      padding: 10px 5px 0 5px;
      div {
        h1 {
          font-size: 14px;
          color: #9cc7fc;
          font-weight: normal;
          text-align: center;
          height: 33.333%;
          margin: 0;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        p {
          padding: 0;
          margin: 0;
          height: 33.333%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 14px;
          em {
            font-style: normal;
            text-align: right;
            color: #9cc7fc;
          }
          b {
            font-weight: normal;
          }
        }
        .threePCenter {
          b {
            font-size: 16px;
            color: #fff;
            width: 70%;
            text-align: right;
          }
          em {
            width: 30%;
          }
        }
        .threePBottom {
          span {
            width: 40%;
            font-weight: normal;
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
            border-radius: 10px;
            text-align: center;
            padding: 2px 0;
            font-size: 12px;
          }
          b {
            width: 40%;
            text-align: right;
            color: #fff;
          }
          em {
            width: 20%;
          }
        }
      }
    }
    li:first-child {
      padding-right: 0;
      padding-left: 0;
    }
    li:last-child {
      padding-right: 0;
      padding-left: 0;
    }
  }
}
</style>
